import React, {
    PureComponent
} from 'react';

import {
    View,
    Text,
    StyleSheet
} from 'react-native';

import {
    Press,
    Layout,
    TabView
} from './../../components';

import * as CONST from './../../const';

import PhotoPage from './photo';
import SeekPage from './../home/me/seeking';

import add_photo_icon from './../../images/home/me/add_photo.png';
import edit_profile_icon from './../../images/home/me/edit_profile.png';

const Pages = [
    SeekPage,
    PhotoPage
];

interface State {
    page:number
}

interface Props {
    page:number
}

class MyBasic extends PureComponent<Props,State> {
    constructor(props:Props) {
        super(props);
        this.state = {
            page:props.page
        }
    }

    _refs:any = {};

    static defaultProps = {
        page:0
    }

    state = {
        page:0
    }

    private onPageChange = (
        page:number
    ) => {
        this.setState({
            page:page
        })
    }

    private renderRight = () => {
        return (
            <Press onPress={this.onSubmit}>
                <Text style={styles.doneText}>
                    Done
                </Text>
            </Press>
        )
    }

    get pageInstance() {
        const {
            page
        } = this.state;
        return this._refs[page];
    }

    private onSubmit = async () => {
        this.pageInstance.onSubmit();
    }

    render() {
        const {
            page
        } = this.state;
        return (
            <Layout
                scroll={false}
                padding={false}
                title="Edit profile"
                renderRight={this.renderRight}
            >
                <View style={styles.lineStyle} />
                <View style={styles.header}>
                    <View style={styles.headerLayer} />
                    <View style={styles.headerContent}>
                       <Press
                           value={0}
                           source={edit_profile_icon}
                           style={styles.editButton}
                           onPress={this.onPageChange}
                       />
                       <Press
                           value={1}
                           source={add_photo_icon}
                           onPress={this.onPageChange}
                       />
                    </View>
                </View>
                <TabView
                    page={page}
                    locked={true}
                    animation={false}
                    onChange={this.onPageChange}
                >
                    {Pages.map((Page:any,i) => (
                        <Page key={i} ref={(e:any) => {
                            this._refs[i] = e;
                        }}/>
                    ))}
                </TabView>
            </Layout>
        )
    }
}

export default MyBasic;

const styles = StyleSheet.create({
    lineStyle:{
        left:0,
        top:0,
        right:0,
        height:60,
        position:`absolute`,
        backgroundColor:CONST.color
    },
    header:{
        height:82,
        overflow:`hidden`,
        marginHorizontal:16
    },
    headerContent:{
        marginTop:-8,
        flexDirection:`row`,
        justifyContent:`center`
    },
    headerLayer:{
        height:56,
        left:0,
        right:0,
        bottom:0,
        position:`absolute`,
        backgroundColor:`#fff`,
        borderTopLeftRadius:8,
        borderTopRightRadius:8
    },
    editButton:{
        marginRight:20
    },
    doneText:{
        fontSize:16,
        color:`#fff`,
        fontWeight:`bold`
    }
}) as any